<template>
  <div>
    <el-card>
      <div slot="header"
           class="clearfix">
        <span>{{title}}</span>
        <!-- <el-button type='primary' @click="dialogDetailFormVisible = true">导出</el-button> -->
      </div>
      <el-form ref="infoForm"
               :model="infoForm"
               label-position="left"
               label-width="120px"
               class="infos flex">
        <h3 style="width:100%;text-align:center;margin-bottom:15px">物料详情</h3>
        <el-form-item label-width='170px' label="制造商料号"
                      prop="productCode"
                      style="width:45%">
          <el-input v-model="infoForm.productCode"
                    :disabled="modify!=0"></el-input>
        </el-form-item>
        <el-form-item label-width='170px' label="AKS料号"
                      prop="askCode"
                      style="width:45%">
          <el-input v-model="infoForm.askCode"
                    :disabled="isDisabled"></el-input>
        </el-form-item>
        <!-- 详情界面 TODO 禁止修改 -->
        <el-form-item label-width='170px' label="制造商"
                      prop="menuName"
                      style="width:45%;">
             <el-input v-model="infoForm.menuName"
                    :disabled="isDisabled"></el-input>
        </el-form-item>
        <!--
        <el-form-item label-width='170px' label="对无铅要求的达标情况"
                      prop="standard"
                      style="width:45%">
          <el-input v-model="infoForm.standard"
                    :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label-width='170px' label="湿气敏感性等级（MSL）"
                      prop="level"
                      style="width:45%">
          <el-input v-model="infoForm.level"
                    :disabled="isDisabled"></el-input>
        </el-form-item>
        -->
        <el-form-item label-width='170px' label="数据列表"
                      prop="dataList"
                      style="width:45%">
          <el-input v-model="infoForm.dataList"
                    :disabled="isDisabled"></el-input>
        </el-form-item>

        <el-form-item label-width='170px' label="包装方式"
                      prop="pack"
                      style="width:45%">
          <el-input v-model="infoForm.pack"
                    :disabled="isDisabled"></el-input>
        </el-form-item>

        <el-form-item label-width='170px' label="零件状态"
                      prop="partStatus"
                      style="width:45%">
          <el-input v-model="infoForm.partStatus"
                    :disabled="isDisabled"></el-input>
        </el-form-item>

        <el-form-item label-width='170px' label="重量（g）"
                      prop="weight"
                      style="width:45%;">
          <el-input v-model="infoForm.weight"
                    :disabled='isDisabled'></el-input>
        </el-form-item>
        <!--
        <el-form-item label="lifeData" prop="lifeData" style="width:40%" >
            <el-input v-model="infoForm.lifeData"
                    style="width:100%"
                    :disabled="isDisabled"></el-input>
        </el-form-item>
        -->
         <el-form-item label-width='170px' label="环保信息" prop="rosh" style="width:45%" >
                <el-select v-model="infoForm.rosh" style="width:100%" placeholder="请选择"  :disabled="isDisabled" clearable>
                  <el-option
                    v-for="item in roshlist"
                    :label="item.name"
                    :value="item.id"
                    :key="item.id"
                  ></el-option>
                </el-select>
        </el-form-item>
 
        <el-form-item label-width='170px' label="主类别"
                      prop="cateName"
                      style="width:45%">
           <el-input v-model="infoForm.cateName"
                    :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label-width='170px' label="子类别"
                      prop="catesonName"
                      style="width:45%">
          <el-input v-model="infoForm.catesonName"
                    style="width:100%"
                    :disabled="isDisabled"></el-input>
        </el-form-item>

        <el-form-item label-width='170px' label="规格描述"
                      prop="storeInfo"
                      style="width:45%">
              <el-input v-model="infoForm.storeInfo"
                    :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label-width='170px' label="促销信息"
                      prop="content"
                      style="width:45%">
          <el-input v-model="infoForm.content"
                    type="textarea"
                    :autosize="{minRows: 2}"
                    style="width:100%"
                    :disabled="isDisabled"></el-input>
        </el-form-item>

          <el-form-item  label-width='170px' label="进货价"
                      prop="stockPrice"
                      style="width:45%;">
          <el-input v-model="infoForm.stockPrice"
                    :disabled='isDisabled'></el-input>
        </el-form-item>

        <el-form-item  label-width='170px' label="库存"
                      prop="stock"
                      style="width:45%;">
          <el-input v-model="infoForm.stock"
                    :disabled='isDisabled'></el-input>
        </el-form-item>

        <el-form-item label-width='170px' label="最大索样数量" prop="maxCount" style="width:45%" >
          <el-input  :disabled="isDisabled" v-model="infoForm.maxCount" placeholder="请输入数量"></el-input>
        </el-form-item>


        <el-form-item label-width='170px' label="产品料号图片"
                      prop="image"
                      style="width:45%">
            <!-- 缩略图 -->
            <div v-if="infoForm.image">
              <el-image :src="infoForm.image"
                        fit="cover" style="width: 30%; height: 30%"></el-image>
            </div>
        </el-form-item>

       

      </el-form>

      <el-form ref="productForm"
               :model="productForm"
               :rules="formRule"
               class="infos flex">
        <el-form-item label="梯度1起始数量"
                      prop="description"
                      style="width:30%">
              <el-input v-model="infoForm.countstart1"
                    :disabled="isDisabled"></el-input>
        </el-form-item>
         <el-form-item label="梯度1结束数量"
                      prop="description"
                      style="width:30%">
              <el-input v-model="infoForm.countend1"
                    :disabled="isDisabled"></el-input>
        </el-form-item>

         <el-form-item label="梯度1价格"
                      prop="description"
                      style="width:30%">
              <el-input v-model="infoForm.price1"
                    :disabled="isDisabled"></el-input>
        </el-form-item>

        <el-form-item label="梯度2起始数量"
                      prop="description"
                      style="width:30%">
              <el-input v-model="infoForm.countstart2"
                    :disabled="isDisabled"></el-input>
        </el-form-item>
         <el-form-item label="梯度2结束数量"
                      prop="description"
                      style="width:30%">
              <el-input v-model="infoForm.countend2"
                    :disabled="isDisabled"></el-input>
        </el-form-item>

         <el-form-item label="梯度2价格"
                      prop="description"
                      style="width:30%">
              <el-input v-model="infoForm.price2"
                    :disabled="isDisabled"></el-input>
        </el-form-item>

        <el-form-item label="梯度3起始数量"
                      prop="description"
                      style="width:30%">
              <el-input v-model="infoForm.countstart3"
                    :disabled="isDisabled"></el-input>
        </el-form-item>
         <el-form-item label="梯度3结束数量"
                      prop="description"
                      style="width:30%">
              <el-input v-model="infoForm.countend3"
                    :disabled="isDisabled"></el-input>
        </el-form-item>

         <el-form-item label="梯度3价格"
                      prop="description"
                      style="width:30%">
              <el-input v-model="infoForm.price3"
                    :disabled="isDisabled"></el-input>
        </el-form-item>
         <el-form-item label="大于梯度3结束数量的价格"
                      prop="description"
                      style="width:50%">
              <el-input v-model="infoForm.price4"
                    :disabled="isDisabled"></el-input>
        </el-form-item>


        <!-- <el-form-item label="价格梯度" style="width:100%"
                      prop="priceGrad">
              <el-table
                :data="productForm.priceGrad"
                stripe>
                <el-table-column
                  prop="range"
                  label="起始、结束数量"
                  width="280">
                </el-table-column>
                <el-table-column
                  prop="price"
                  label="价格"
                  width="280">
                </el-table-column>
              </el-table>
         </el-form-item> -->
      
         <el-form-item label-width='170px' label="规格书下载"
                      prop="shopPdf"
                      style="width:50%">
            <el-link type="primary" :href="infoForm.shopPdf" target="_blank">{{infoForm.shopPdf}}</el-link>
        <el-form-item label="是否上架"
                      prop="producer"
                      style="width:50%;">
                <el-switch
                  v-model="productForm.isShow"
                  active-text="上架"
                  inactive-text="未上架" disabled>
                </el-switch>
        </el-form-item>
        
        </el-form-item>
        
  

        <!-- <el-form-item label="成本价"
                      prop="costPrice"
                      style="width:30%">
          <el-input v-model="infoForm.costPrice"
                    :disabled="isDisabled"></el-input>
        </el-form-item> -->

       

        <el-button size="medium"
                 type="primary" style="width:30%;"
                 @click="backProduct">返回</el-button>
      </el-form> 
    </el-card>
  </div>
</template>

<script>
import {
  PRODUCT_ADD, PRODUCT_UPDATE,PRUDUCT_DETAIL,
  PRODUCT_IMAGE_FILE, PRODUCT_PDF_FILE, CATEGORY_LIST
} from "@/utils/api";

import axios from 'axios'
export default {
  data () {
    return {
      //0 Active量产 1 NRND不推荐新项目使用 2 Discontinued 已停产 3 Unknow
      lifelist:[{"id":0,"name":"Active量产"},{"id":1,"name":"NRND不推荐新项目使用"},
      {"id":2,"Discontinued 已停产":"Active量产"},{"id":3,"name":"Unknow"}],
      roshlist:[{"id":1,"name":"符合RoSH"},{"id":2,"name":"非RoSH"},{"id":0,"name":"无"}],
      dialogDetailFormVisible:false,
      tableData: [],//物料分类
      detail: false,
      title: "新增物料",
      modify: 0,
      id: 0,
      // 上传
      updateForm: { imageUrl: '', pdfUrl: '' },
      file: null,
      loadings: '',
      hiddenFile: null,
      pdfFile: null,

      isDisabled: false,
      productForm: {
        // liaohaoName:'',
        // price:'',
        // productNum:'',
        // stock:'',
        // isShow:1,
        //  attrName:'',
        //  attrVal:'',
        priceGrad:[{"range":"1~10","price":100},{"range":"20~30","price":95},
        {"range":"30~40","price":90},{"range":"40~50","price":85},{"range":"50~60","price":80}]
      },
      formRule: {},
      isDisabled: false,
      dialogVisible2: false,
      newAttrData: [{ labelName: "", attrName: "" }],
      newAttrForm: {},
      infoForm: {
        // id:0,
        // cateId:'',
        // productCode:'',
        // storeName:'',
        // manufacturer:'',
        // standard:'',
        // level:'',
        // endData:'',
        // description:'',
        // dataList:'',
        // packStard:'',
        // pack:'',
        // partStatus:'',
        // partClass:'',
        // productZu:'',
        // partXl:'',
        // manufacturerCode,
        AllSlist: [{"id":1,"menuName":"傲然"},
                  {"id":2,"menuName":"咩咩"},
                  {"id":3,"menuName":"mc"},
                  {"id":4,"menuName":"lulu"}]
      },
    };
  },
  mounted () {
    this.queryListAct();
    this.modify = 0
    if (this.$route.query["data"]) {
      this.isDisabled = this.$route.query["handler"] == "check" ? true : false;
      this.detail = this.$route.query['detail'] == 'ok' ? true : false;
      console.log('++modify if++>' + this.infoForm.image)
      if (this.detail) {
        this.modify = 2
        this.title = '物料详情'
      } else {
        this.modify = 1
        this.title = '修改物料'
      }
      this.id = this.$route.query["data"].id
      console.log('++modify if++>' + this.modify)
      console.log('++++>' + JSON.stringify(this.id))
      if (this.id == null) {
        this.$router.push({
          path: "product"
        });
      }
    }
    console.log('++modify else++>' + this.modify)
    this.getProductDeatil()
  },
  methods: {
    backProduct(){
      this.$router.push({
          path: "product"
      });
    },
    //详情
    getProductDeatil(){
      PRUDUCT_DETAIL({
        id:this.id
      }).then(res => {
          if (res.status == 200) {
            this.infoForm = res.data;
             switch(this.infoForm.lifeData){
                case 0:
                  this.infoForm.lifeData='Active量产'
                break
                case 1:
                  this.infoForm.lifeData='NRND不推荐新项目使用'
                break
                case 2:
                  this.infoForm.lifeData='Discontinued 已停产'
                break
                case 3:
                  this.infoForm.lifeData='Unknow'
                break
              }
           
          }
      });
    },
    // 列表查询
    queryListAct () {
      CATEGORY_LIST({
      }).then(res => {
        this.tableData = res.data.dataList;
      });
    },
    addAttr () {
      var obj = {
        labelName: "",
        attrName: ""
      };
      this.newAttrData.push(obj);
    },
    // 上传前-拦截上传格式
    beforeUpload (file) {
      console.log('==file==>' + file)
      this.infoForm.image = ''
      this.hiddenFile = file
    },
    httpRequest () {
      console.log('==httpRequest==>' + this.hiddenFile)
      // this.loadings = this.$pageLoading.service({
      //   lock: true,
      //   text: '正在上传中,请耐心等待',
      //   spinner: 'el-icon-loading'
      // })
      let param = new FormData()  // 创建form对象
      param.append('image', this.hiddenFile)
      let config = {
        headers: { 'Content-Type': 'multipart/form-data' }
      }
      var that = this
      axios.post('http://fox.foxcore.cn/api/v1/file/image/product', param, config)
        .then(response => {
          if (response.data.status === 200) {
            this.imageUrl = response.data.data
            this.infoForm.image = 'http://oss.dataos.top/' + response.data.data
            this.$message.success('上传图片成功')

          }
          console.log(response.data)
        })
    },

    // 上传前-拦截上传格式
    beforeUploadPdf (file) {
      console.log('==file==>' + file)
      this.infoForm.specsBook = ''
      this.pdfFile = file
    },
    uploadPdf () {
      let param = new FormData()  // 创建form对象
      param.append('file', this.pdfFile)
      let config = {
        headers: { 'Content-Type': 'multipart/form-data' }
      }
      axios.post('http://fox.foxcore.cn/api/v1/file/pdf/product', param, config)
        .then(response => {
          if (response.data.status === 200) {
            this.pdfUrl = response.data.data
            this.infoForm.specsBook = 'http://oss.dataos.top/' + response.data.data
            this.$message.success('上传文档成功')
          }
        })
    },
    addProduct () {
      //增加
      if (this.modify == 0) {
        this.addP()
      } else {
        this.updateP()
      }

    },
    checkDetail (row, index) {
      this.$router.push({
        path: "addSeries",
        query: {
          data: row,
          handler: "check" //用于判断是详情还是编辑 详情则表单不可编辑
        }
      });
    },
    edit (row, index) {
      this.$router.push({
        path: "addSeries",
        query: {
          data: row,
          handler: "edit" //用于判断是详情还是编辑 详情则表单不可编辑
        }
      });
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
    },
    handleClose (done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          this.dialogVisible2 = false;
        })
        .catch(_ => { });
    }
  }
};
</script>

<style lang="scss" scoped>
.infos {
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
  .item {
    width: 30%;
  }
}
</style>